<template>
    <div class="month-trend-chart" ref="chartRef"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, onBeforeUnmount, watch, ref, nextTick } from "vue";
import * as echarts from "echarts";

interface DataItem {
    month: string;
    value: number;
}

export default defineComponent({
    name: "MonthTrendChart",
    props: {
        data: {
            type: Array as PropType<DataItem[]>,
            required: true,
        },
        title: {
            type: String,
            default: "Monthly Trend",
        },
    },
    setup(props) {
        const chartRef = ref<HTMLDivElement | null>(null);
        let chartInstance: echarts.ECharts | null = null;
        let containerHeight = ref<number>(0);
        const initChart = () => {
            if (chartRef.value) {
                chartInstance = echarts.init(chartRef.value);
                updateChart();
            }
        };

        const updateChart = () => {
            if (!chartInstance) return;

            const option: echarts.EChartsOption = {
                title: {
                    text: props.title,
                    left: "center",
                    show: false,
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category",
                    data: props.data.map(item => item.month),
                    nameTextStyle: { color: "#fff" },
                },
                yAxis: {
                    type: "value",
                    nameTextStyle: { color: "#fff" },
                },
                series: [
                    {
                        data: props.data.map(item => item.value),
                        type: "line",
                        smooth: true,
                        areaStyle: {},
                    },
                ],
                grid: {
                    left: "5%",
                    right: "5%",
                    bottom: "10%",
                    containLabel: true,
                },
            };
            chartInstance.setOption(option);
        };
        onMounted(async () => {
            await nextTick();
            setContainerHeight();
            initChart();
            chartRef.value && ro.observe(chartRef.value);
        });

        watch(
            () => props.data,
            async () => {
                await nextTick();
                setContainerHeight();
                updateChart();
            }
        );

        watch(
            () => containerHeight,
            () => {
                if (chartInstance) {
                    chartInstance.resize({ height: containerHeight.value });
                }
            }
        );
        // 重新绘制echarts大小的方法
        function resize() {
            chartInstance?.resize();
        }
        // 监听容器大小
        const ro = new ResizeObserver(() => resize());

        // 得到父元素高度
        const setContainerHeight = () => {
            if (chartRef.value) {
                containerHeight.value = chartRef.value.parentElement?.clientHeight || 0;
            }
        };

        // 监听窗口大小

        onBeforeUnmount(() => {
            ro.disconnect();
            chartInstance?.dispose();
        });
        return {
            chartRef,
        };
    },
});
</script>

<style scoped lang="scss">
.month-trend-chart {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
